<template>
	<view class="fullPage">
		<map id="map" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="list" :show-location="false"
			@regionchange="dragMap" @markertap="markertap" @click="mapTap" style="width: 100vw;height: 100vh">
		</map>
		<!-- tab栏切换 -->
		<view class="tab_w">
			<view class="h60 ft30">我的电池</view>
			<view class="h50">电池ID：{{ info.batteryNo || '--' }}</view>
			<view class="h50">总电压：{{ info.typeVt || '--' }}V</view>
			<view class="h50">总电流：{{ info.current / 100 || 0 }}A</view>
			<!-- 0: 放电状态1: 充电状态2: 负载在位状态3: 充电在位状态 4:空载状态 -->
			<view class="flex h50">
				电池状态：
				<view class="primary">
					{{
							info.btStatus == 0
								? '放电状态'
								: info.btStatus == 1
								? '充电状态'
								: info.btStatus == 2
								? '负载在位状态'
								: info.btStatus == 3
								? '充电在位状态'
								: info.btStatus == 4
								? '空载状态'
								: '--'
						}}
				</view>
			</view>
			<view class="h50">电池温度：{{ info.temperature || '--' }}°C</view>
			<view class="h50">电池电量百分比：{{ info.electric || '--' }}%</view>
			<!-- <view class="h50">剩余容量：{{ info.ahRemain / 100 || 0 }}AH</view> -->
		</view>

		<view class="footer_w">
			<view class="footer_btn" @click="batteryOrderFn">
				查看电池订单</view>
		</view>

	</view>
</template>

<script>
	class Gps {
		//构造函数
		constructor(obj = {}) {
			let {
				longitude,
				latitude
			} = obj;
			if (longitude === undefined || latitude === undefined) {
				return console.error("经纬度参数不能为空!");
			}
			this.PI = 3.14159265358979324;
			return this.getCoordinate(longitude, latitude);
		};
		//纬度转换
		transformLatitude(x, y) {
			let num = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
			num += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
			num += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
			num += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
			return num;
		};
		//经度转换
		transformLongitude(x, y) {
			let num = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
			num += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
			num += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
			num += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
			return num;
		};
		// 坐标转换
		calculation(longitude, latitude) {
			let a = 6378245.0; // 卫星椭球坐标投影到平面地图坐标系的投影因子。
			let ee = 0.00669342162296594323; // 椭球的偏心率。
			let lat = this.transformLatitude(longitude - 105.0, latitude - 35.0);
			let lng = this.transformLongitude(longitude - 105.0, latitude - 35.0);
			let radLat = latitude / 180.0 * this.PI;
			let magic = Math.sin(radLat);
			magic = 1 - ee * magic * magic;
			let sqrtMagic = Math.sqrt(magic);
			lat = (lat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
			lng = (lng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
			return {
				'longitude': lng,
				'latitude': lat,
			};
		};
		// 判断是否为国外坐标
		isOutOfChina(longitude, latitude) {
			if (longitude < 72.004 || longitude > 137.8347) {
				return true;
			};
			if (latitude < 0.8293 || latitude > 55.8271) {
				return true;
			};
			return false;
		};
		// GPS坐标 转 高德坐标
		getCoordinate(longitude, latitude) {
			longitude = Number(longitude);
			latitude = Number(latitude);
			if (this.isOutOfChina(longitude, latitude)) {
				//国外
				return {
					"longitude": longitude,
					"latitude": latitude,
				}
			} else {
				//国内
				let obj = this.calculation(longitude, latitude);
				return {
					"longitude": longitude + obj.longitude,
					"latitude": latitude + obj.latitude,
				};
			}
		};
	}

	import {
		getMyBattery
	} from '@/api/user.js'
	export default {
		data() {
			return {
				mapContext: null,
				scale: 14, // 地图缩放比例
				latitude: 23.02067,
				longitude: 113.75179,
				list: [], // 设备列表
				info: {}
			}
		},
		onLoad() {
			this.mapContext = uni.createMapContext('map')
			if (this.$store.state.user.token) {
				this.getMyBattery()
			}
		},
		methods: {
			async getMyBattery() {
				const res = await getMyBattery()
				if (res.code == 200) {
					const info = res.data
					this.info = info
					//使用方法
					var obj = new Gps({
						"latitude": info.lat,
						"longitude": info.lng
					});
					console.log('obj: ', `${obj.longitude},${obj.latitude}`);
					this.mapContext.moveToLocation({
						longitude: obj.longitude * 1,
						latitude: obj.latitude * 1
					})
					let arr = [{
						id: -1,
						latitude: obj.latitude * 1,
						longitude: obj.longitude * 1,
						width: 70,
						height: 70,
						iconPath: '/static/ic_sbdw_2x.png',
						anchor: {
							x: 0.5,
							y: 0.5
						}
					}]
					this.list = JSON.parse(JSON.stringify(arr))
					this.$set(this, 'list', arr)
					console.log(this.list)
				} else if (res.code == 1010) {
					this.confirm({
						content: res.msg,
						showCancel: false
					}).then(res => {
						this.back()
					})
				} else {
					this.toast(res.msg)
				}
			},
			dragMap(e) {
				// 注意：支付宝小程序 如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的
				// scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小。
				// #ifdef MP-ALIPAY
				// console.log(e)
				// console.log(e.scale)
				// this.scale = e.scale

				// this.mapContext.getCenterLocation({
				// 	success: res => {
				// 		console.log(res.longitude)
				// 		console.log(res.latitude)

				// 		this.latitude = res.latitude
				// 		this.longitude = res.longitude
				// 	},
				// 	fail: err => {
				// 		console.log(err)
				// 	}
				// })
				// #endif
				console.log('地图被拖动3')
				this.markerInfoShow = false
			},
			mapTap() {
				console.log('地图被点击')
				// this.markerInfoShow = false
			},
			markertap(e) {
				/* console.log(e)
				console.log(this.list)
				if (e.detail.markerId < 0) {
					return false
				} */
			},

			batteryOrderFn() {
				if (!this.$store.state.user.token) {
					this.toast('请先登录再来查看')
					return false
				}
				// this.isLoginss = this.$store.state.user.token
				this.routerLink({
					path: '/pages/user/myOrder/index',
					query: {
						activeTab: 3
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tab_w {
		position: fixed;
		top: 30upx;
		left: 26upx;
		width: 698upx;

		padding: 30upx 24upx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50upx;
		overflow: hidden;
		box-shadow: 0px 4px 18px 0px rgba(50, 130, 255, 0.24);
	}

	.footer_w {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750upx;
		box-sizing: border-box;
		padding: 40px 30px;
		background-color: #fff;

		.footer_btn {
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			background-color: $primary;
			border-radius: 90upx;
			color: #fff;
			font-size: 32upx;
		}
	}
</style>